<template>
  <div class="boxs margin_top">
    <headers :pageindex="3"></headers>
    <div :class="!ismobile ? 'isp ' : 'ism'">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in photo" :key="index">
            <img class="swiperimg" :src="item.img" alt="">
          </div>
        </div>
        <div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
      </div>
      <div class="width1300">
        <titleline :miantitle="'Business partner'" :explaintitle="'合作商家'"></titleline>
        <ul>
          <li v-for="(item, index) in merchantlist">
            <img :src="item.logo" alt="">
            <p>{{ item.name }}</p>
          </li>
        </ul>
      </div>
    </div>

    <bottoms></bottoms>
  </div>
</template>

<script>


import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import { WOW } from "wowjs";
import bottoms from "./modle/bottoms.vue"
import headers from "./modle/headers.vue"
import titleline from "./modle/titleline.vue"
import hengscroll from "./modle/hengscroll.vue"
export default {
  name: 'HelloWorld',
  components: {
    headers,
    bottoms,
    titleline,
    hengscroll
  },
  data() {
    return {
      ismobile: "",
      merchantlist: [],
      photo: [
        {
          img: require('../assets/images/223-320.jpg')
        },
        {
          img: require('../assets/images/223-320.jpg')
        },
        {
          img: require('../assets/images/223-320.jpg')
        },]
    }
  },
  created() {
    this.get_partners()
  },
  methods: {
    get_partners() {
      this.$api.get(
        "/api/PortalHome/get_partners",
        {
        },
        (r) => {
          this.merchantlist = r.DATA
        },
        (f) => { }
      );
    },
  },
  mounted() {

    this.ismobile = this.isMobile()
    let that = this;
    window.addEventListener('resize', function () {
      that.ismobile = that.isMobile()
    });

    // 顶部轮播图
    new Swiper('.swiper-container', {
      loop: true,
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true,
        dynamicMainBullets: 2,
        clickable: true,
      },
    })


  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
ul {
  margin: 0 auto;
  padding: 0;
  overflow: hidden;

  li {
    width: 33.33%;
    padding: 1%;
    float: left;

    img {
      display: block;
      width: 100%;
      background: red;
    }

    p {
      display: block;
      text-align: center;
      color: 0.9rem;
    }
  }
}

.ism {
  ul {
    width: 95%;
    margin: 0 auto;

    li {
      width: 50%;
      padding: 1%;

      p {
        display: block;
        text-align: center;
        color: 0.9rem;
      }
    }
  }
}

.isp {
  margin-top: 6.5rem;
}

.swiperimg {
  width: 100%;
}

.swiper-container {
  max-width: 1500px;
  margin: 0 auto;
}
</style>
